<template>
  <div class="box4" ref="map">我是地图组件</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//引入中国地图的JSON数据
import chinaJSON from './china.json'
import { reqProvince } from '@/api/screen'
//获取DOM元素
let map = ref()
let province = ref([])
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(async () => {
  await getProvince()
  await init()
})
const getProvince = async () => {
  let result = await reqProvince()
  if (result.code === 200) {
    province.value = result.data
  }
}
const init = () => {
  let mychart = echarts.init(map.value)
  //设置配置项
  mychart.setOption({
    // backgroundColor: '#36F3BE', //echarts图表背景颜色
    visualMap: {
      textStyle: { color: '#fff' },
      left: 70,
      bottom: 150,
      splitList: [
        { start: 10 },
        { start: 8, end: 10 },
        { start: 6, end: 8 },
        { start: 4, end: 6 },
        { start: 2, end: 4 },
        { start: 0, end: 2 },
      ],
      // text:['高','低'],// 文本，默认为数值文本
      // color: ['#65A2D9', '#E09107', '#A3E00B']
      color: ['#5475f5', '#9feaa5', '#3FA7FF', '#66E0E3', '#FFDC5E', '#9fb5ea'],
    },

    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (params.seriesType == 'scatter') {
          return params.name + ' : ' + params.value[2]
        }
        if (isNaN(params.value)) {
          return params.name + ' : ' + 0
        } else {
          return params.name + ' : ' + params.value + ' 人'
        }
      },
      showDelay: 0,
      transitionDuration: 0.2,
    },
    title: {
      text: '各省用户数量',
      left: 50,
      top: 100,
      textStyle: {
        color: 'white',
      },
    },
    grid: {
      top: 200,
    },
    series: [
      {
        name: '全国数据',
        type: 'map',
        mapType: 'china',
        zoom: 1.2,
        roam: true, //是否开启鼠标缩放和平移漫游
        itemStyle: {
          //地图区域的多边形 图形样式
          normal: {
            //是图形在默认状态下的样式
            label: {
              show: true,
              textStyle: { color: 'rgb(249, 249, 249)' },
            },
          },
          emphasis: {
            //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
            label: { show: true },
            areaColor: '#08d34e',
          },
        },
        data: province.value,
      },
    ],
  })
  // //地图组件
  // geo: {
  //   map: 'china', //中国地图
  //   roam: true, //鼠标缩放的效果
  //   //地图的位置调试
  //   left: 150,
  //   top: 150,
  //   right: 150,
  //   zoom: 1.2,
  //   bottom: 0,
  //   //地图上的文字的设置
  //   label: {
  //     show: true, //文字显示出来
  //     color: 'white',
  //     fontSize: 14,
  //   },
  //
  //   itemStyle: {
  //     //每一个多边形的样式
  //     color: {
  //       type: 'linear',
  //       x: 0,
  //       y: 0,
  //       x2: 0,
  //       y2: 1,
  //       colorStops: [
  //         {
  //           offset: 0,
  //           color: 'skyblue', // 0% 处的颜色
  //         },
  //         {
  //           offset: 1,
  //           color: 'green', // 100% 处的颜色
  //         },
  //       ],
  //       global: false, // 缺省为 false
  //     },
  //     opacity: 0.8,
  //   },
  //   //地图高亮的效果
  //   emphasis: {
  //     itemStyle: {
  //       color: 'skyblue',
  //     },
  //     label: {
  //       fontSize: 30,
  //     },
  //   },
  // },
  // //布局位置
  // grid: {
  //   left: 0,
  //   top: 0,
  //   right: 0,
  //   bottom: 0,
  // },
  // series: [
  //   {
  //     type: 'map', //航线的系列
  //     map: 'china', //中国地图
  //     //数据
  //     data: [
  //     ],
  //     //开启动画特效
  //     effect: {
  //       show: true,
  //       symbol: 'arrow',
  //       color: 'black',
  //       symbolSize: 10,
  //     },
  //   },
  //   {
  //     type: 'map', //航线的系列
  //     map: 'china', //中国地图
  //     //数据
  //     data: [],
  //     //开启动画特效
  //     effect: {
  //       show: true,
  //       symbol: 'arrow',
  //       color: 'black',
  //       symbolSize: 10,
  //     },
  //   },
  // ],
}
</script>

<style scoped></style>
